<template>
    <div class="container">
        <el-tabs v-model="activetabs">
            <el-tab-pane label="种植系统" name="种植系统"> 
                <el-checkbox-group v-model="ids" style="margin-top:20px;" >
                    <div v-for="(item,index) in list" :key="index" v-if="item.configMenu == false"  class="checkbox-content">
                        <el-checkbox  :label="item.id"  @change="handlecheckbox1(index)">{{item.name}}</el-checkbox>
                        <el-checkbox-group v-model="ids" class="checked-right" style="margin-top:20px; display:inline-block;">
                            <el-checkbox v-for="(s,sindex) in item.children" @change="handlecheckbox(sindex)"  :key="sindex" :label="s.id">{{s.name}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                </el-checkbox-group>
            </el-tab-pane>
            <el-tab-pane label="系统设置" name="系统设置">
                <el-checkbox-group v-model="ids" style="margin-top:20px;" >
                    <div v-for="(item,index) in list" :key="index" v-if="item.configMenu == true" class="checkbox-content" >
                        <el-checkbox  :label="item.id"  @change="handlecheckbox1(index)">{{item.name}}</el-checkbox>
                        <el-checkbox-group v-model="ids" class="checked-right" style="margin-top:20px; display:inline-block;">
                            <el-checkbox v-for="(s,sindex) in item.children" @change="handlecheckbox(sindex)"  :key="sindex" :label="s.id">{{s.name}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                </el-checkbox-group>
            </el-tab-pane>
        </el-tabs>
        <div style="width:100%; border:1px solid #ccc;margin-top:20px;">
            <div style="width:10%;line-height:50px;text-align:center; font-size:14px; display:inline-block; border-right:1px solid #ccc;">
                种植类别
            </div>
            
			<div style="display:inline-block; width:68%;">
			    <el-checkbox-group v-model="categories"  style="margin-top:20px; margin-left:20px; display:inline-block;">
			        <el-checkbox v-for="(s,sindex) in classify"  :key="sindex" :label="s.id">{{s.name}}</el-checkbox>
			    </el-checkbox-group>
			</div>
        </div>
        <el-form ref="form" :model="ruleForm" label-width="80px">
            <el-row :gutter="20" style="margin-top:20px;">
                <el-col :span="10">
                    <el-form-item label="数字地图" >
                        <el-form-item label="基地数" >
                            <el-input class="handle-input" style="width:300px;"  v-model="ruleForm.basesNum"></el-input>
                            <span style="margin-left:20px;">个</span>
                            <!-- <el-checkbox style="margin-left:20px;" v-model="radio1">不限</el-checkbox> -->
                        </el-form-item>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="地块数" >
                        <el-input class="handle-input" style="width:300px;"  v-model="ruleForm.soilNum"></el-input>
                        <span style="margin-left:20px;">个</span>
                        <!-- <el-checkbox style="margin-left:20px;" v-model="radio1">不限</el-checkbox> -->
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="10">
                    <el-form-item label="种植批次" >
                        <el-input class="handle-input" style="width:300px;"  v-model="ruleForm.batchNum"></el-input>
                        <span style="margin-left:20px;">批/年</span>
                        <!-- <el-checkbox style="margin-left:20px;" v-model="radio1">不限</el-checkbox>      -->
                    </el-form-item>
                </el-col>
                 <el-col :span="10">
                    <el-form-item label="作物种类" >
                        <el-input class="handle-input" style="width:300px;"  v-model="ruleForm.modelNum"></el-input>
                        <span style="margin-left:20px;">种</span>
                        <!-- <el-checkbox style="margin-left:20px;" v-model="radio1">不限</el-checkbox> -->
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="10">
                    <el-form-item label="赋码量" >
                        <el-input class="handle-input" style="width:300px;"  v-model="ruleForm.maxPrint"></el-input>
                        <!-- <el-checkbox style="margin-left:20px;" v-model="radio1">不限</el-checkbox> -->
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="扫码量" >
                        <el-input class="handle-input" style="width:300px;"  v-model="ruleForm.maxScan"></el-input>
                        <!-- <el-checkbox style="margin-left:20px;" v-model="radio1">不限</el-checkbox> -->
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="10">
                    <el-form-item label="员工账号" >
                        <el-input class="handle-input" style="width:300px;"  v-model="ruleForm.maxUser"></el-input>
                        <!-- <el-checkbox style="margin-left:20px;" v-model="radio1">不限</el-checkbox> -->
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top:20px;">
                <el-col :span="10">
                    <el-form-item label="版本名称" >
                        <el-input class="handle-input" style="width:300px;"  v-model="ruleForm.versionName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="产品价格" >
                        <el-input class="handle-input" style="width:300px;"  v-model="ruleForm.price"></el-input>
                        <span style="margin-left:20px;">元/年</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-button @click="submit">提交</el-button>
    </div>
</template>

<script>
import {control_get,model_findByOne,control_createsave,findCustomAppVersionId,modecategory_root,modecategory_loadroot} from "@/request/api"
    export default {
        data(){
            return{
                modelIds:[],
				categories:[],
                ids:[],
                radio1:false,
                ruleForm:{
                    modelIds:'',
                    customAppId:'',
                    name:''
                },
                classify:'',
                activetabs:'种植系统',
                appId:'',
                list:'',
                checked:[],
				customAppId:''
				
            }
        },
        mounted(){
            this.ruleForm.name = this.$route.query.name
            this.customAppId = this.$route.query.id
			this.ruleForm.customAppId = this.$route.query.id
            this.ruleForm.appId = this.$route.query.appId
            this.init()
            if(this.customAppId == "" || this.customAppId == null){

            }else{
                this.getdeploy()
            }
        },
        methods:{
            init(){
                
                control_get(this.ruleForm.appId).then((res)=>{
                    this.list = res.data
                })
				modecategory_loadroot(this.customAppId).then((res)=>{
					var list = res
					var modelId = []
					for(var s=0;s<list.length;s++){
						modelId.push(list[s].id)
					}
					this.categories = modelId
				})
				// let companyId = localStorage.getItem("companyId")
				// let userType = localStorage.getItem("userType")
				// let data = {
				// 	companyId:companyId,
				// 	userType:userType
				// }
                modecategory_root("").then((res)=>{
                	this.classify = res.data
                })
            },
            getdeploy(){
                findCustomAppVersionId(this.customAppId).then((res)=>{
                    this.ruleForm = res.data
                    this.modelIds = res.data.modelIds.split(",")
                    var arr = []
                    for(var i=0;i<res.data.res.length;i++){
                        arr.push(res.data.res[i].resourceId)
                    }
					// console.log(arr)
                    this.ids = arr
                })
            },
            handlecheckbox1(){

            },
            handlecheckbox(){
                
            },
            submit(){
                this.ruleForm.modelIds = this.modelIds.join(",")
                let data ={
                    ids:this.ids,
                    customAppVersion:this.ruleForm,
					customAppVersionId:this.customAppId,
					categories:this.categories
                }
                control_createsave(data).then((res)=>{
					this.$notify({
						title: '提示',
						message: '保存成功',
						type: 'success',
						duration: 1000
					});
					this.$router.go(-1)
                })
            }
        }
    }
</script>

<style scoped>
.checked-right{
    position: absolute;
    left:150px;
    top:-12px;
}
.checkbox-content{
    height:30px;
    line-height:30px;
    position: relative;
    border: 1px solid #dcdfe6;
    padding:8px;
}
</style>